---
# title: "Divide Style"
title: "分割线样式"
# description: "Utilities for controlling the border style between elements."
description: "用于控制元素之间的边框样式的功能类。"
---

import plugin from 'tailwindcss/lib/plugins/divideStyle'
import { Variants } from '@/components/Variants'
import { Disabling } from '@/components/Disabling'
import { Heading } from '@/components/Heading'

export const classes = {
  plugin,
  transformSelector: (selector) => (
    <>
      {selector.split('>').shift().trim().replace(/^\./, '').replace(/\\/g, '')} <span className="ml-1 text-purple-300">> * + *</span>
    </>
  ),
}

<!-- ## Usage -->
## 使用

<!-- Control the border style between elements using the `divide-{style}` utilities. -->
使用 `divide-{style}` 功能控制元素之间的边框样式。

```html amber
<template preview>
  <div class="divide-y-4 divide-amber-600 divide-dashed">
    <div class="text-center font-extrabold text-2xl text-amber-600 py-3">1</div>
    <div class="text-center font-extrabold text-2xl text-amber-600 py-3">2</div>
    <div class="text-center font-extrabold text-2xl text-amber-600 py-3">3</div>
  </div>
</template>

<div class="divide-y-4 divide-yellow-600 **divide-dashed**">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
```

<!-- ## Responsive -->
## 响应式

<!-- To control the border style between elements at a specific breakpoint, add a `{screen}:` prefix to any existing divide style utility. For example, use `md:divide-dashed` to apply the `divide-dashed` utility at only medium screen sizes and above. -->
要在特定的断点处控制元素之间的边框样式，请在任何现有的 divide style 功能中添加 `{screen}:` 前缀。例如，使用 `md:divide-dashed` 来应用 `divide-dashed` 功能，只适用于中等尺寸以上的屏幕。

```html
<div class="divide-y-2 divide-dashed **md:divide-solid**">
  <!-- ... -->
</div>
```

<!-- For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation. -->
关于 Tailwind 的响应式设计功能的更多信息，请查看[响应式设计](/docs/responsive-design)文档。

<!-- ## Customizing -->
## 自定义

<!-- ### Variants -->
### 变体

<Variants plugin="divideStyle" />

<!-- ### Disabling -->
### 禁用

<Disabling plugin="divideStyle" />
